<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WelCome to HuNan University JudgeOnline</title>
    <link rel="stylesheet" href="style/nav.css" >
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 自己的js文件 -->
    <script src="js/controller.js"></script>
    <script src="js/myajax.js"></script>
    <script src="js/filter.js"></script>
</head>
<body>
    <div class="container">
        <!-- page head -->
        <div class="head-logo">
            <img alt="hnulogo" src="img/hnulogo.gif">
            <h2>Welcome To Hunan University Judge Online</h2>
            <img alt="acmlogo" src="img/acm.png" class="img-circle icpc" />
        </div>
        <div class="masthead">
            <ul class="nav nav-pills">
                <li id="home"><a href="index">Home</a></li>
                <li id="problem"><a href="problemset">Problem</a></li>
                <li id="contest"><a href="contest">Contest</a></li>
                <li id="status"><a href="status">Status</a></li>
                <li id="rank"><a href="rank">Rank</a></li>
                <li id="user"><a href="discuss">Discuss</a></li>
                <li id="about"><a href="fas">FAQ</a></li>
                <li class="pull-right" id="info">
                    <button type="button" class="btn btn-primary" onclick="preLogin()">Login</button>
                    <button type="button" class="btn btn-primary" onclick="preRegister()">Register</button>
                </li>
            </ul>
        </div>

        <!-- Site content-->
        <div class="row">
            <div id="form" class="col-md-offset-3 column form-horizontal" style="margin-top: 5em; margin-bottom: 5em">
                <div class="col-md-offset-2" style="margin-bottom: 1em">
                    <span id="warning" class="wa"></span>
                </div>
                <div class="form-group">
                        <label for="userName" class="col-sm-2 control-label">User Name*</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="userName" />
                    </div>
                </div>
                <div class="form-group">
                        <label for="nickname" class="col-sm-2 control-label">Nickname*</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="nickname" />
                    </div>
                </div>
                <div class="form-group">
                        <label for="school" class="col-sm-2 control-label">School*</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="school" />
                    </div>
                </div>
                <div class="form-group">
                        <label for="major" class="col-sm-2 control-label">Major*</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="major" />
                    </div>
                </div>
                <div class="form-group">
                        <label for="grade" class="col-sm-2 control-label">Grade</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="grade" />
                    </div>
                </div>
                <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-3">
                        <input type="email" class="form-control" id="email" />
                    </div>
                </div>
                <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">Password*</label>
                    <div class="col-sm-3">
                        <input type="password" class="form-control" id="password" />
                    </div>
                </div>
                <div class="form-group">
                        <label for="repassword" class="col-sm-2 control-label">Repassword*</label>
                    <div class="col-sm-3">
                        <input type="password" class="form-control" id="repassword" />
                    </div>
                </div>
                <div class="form-group margin-top-2">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button id="register" type="submit" class="btn btn-default">Register</button>
                        <button id="reset" type="submit" class="btn btn-default margin-left-2">Reset</button>
                    </div>
                </div>
            </div>
        </div>
        <!--（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">验证码</h4>
                    </div>
                    <div class="modal-body">
                        <a href="#" onclick="getVerifyCode('myimg')"><img alt="vevifyCode" id="myimg" /></a>
                        <br />
                        <br />
                        Verify Code is:
                        <br />
                        <input id="verifyCode" type="text" class="form-control" style="width: 12em"/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button id="submit" type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
  
        <!-- Site footer -->
        <footer class="footer">
            <p>&copy; HNU ACM Team | <a href="#">Contact Us</a> | Version 2018</p>
            <p>Developer：balabala</p>
        </footer>
    </div>
</body>
<script>
    $("#reset").click(function() {
        var list = document.getElementById("form").getElementsByTagName("input");
        for (i in list) {
            list[i].value="";
        }
    });
    $("#register").click(function() {
        var userName= document.getElementById("userName").value;
        var nick = document.getElementById("nickname").value;
        var school = document.getElementById("school").value;
        var major = document.getElementById("major").value;
        var password = document.getElementById("password").value;
        var repassword = document.getElementById("repassword").value;
        if (checkName(userName) == false) {
            document.getElementById("warning").textContent = "only letters, numbers and underline are allowed in user name";
        }
        else if (nick == null || nick == "") {
            document.getElementById("warning").textContent = "nick can't be null";
        }
        else if (school == null || school == "") {
            document.getElementById("warning").textContent = "school can't be null";
        }
        else if (major == null || major == "") {
            document.getElementById("warning").textContent = "major can't be null";
        }
        else if (password == null || password == "") {
            document.getElementById("warning").textContent = "password can't be null";
        }
        else if (password != repassword) {
            document.getElementById("warning").textContent = "confirm password error";
        }
        else {
            getVerifyCode("myimg");
            document.getElementById("warning").textContent = "";
            $("#myModal").modal("show");
        }
    })
    $("#submit").click(function() {
        var jsonData = new Object();
        jsonData.name = document.getElementById("userName").value;
        jsonData.nick = document.getElementById("nickname").value;
        jsonData.school = document.getElementById("school").value;
        jsonData.major = document.getElementById("major").value;
        jsonData.grade = document.getElementById("grade").value;
        jsonData.contact = document.getElementById("email").value;
        jsonData.password = document.getElementById("password").value;
        jsonData.uuid = sessionStorage.getItem("uuid");
        jsonData.verifyCode = document.getElementById("verifyCode").value;
        var data = new Object();
        data.data = jsonData;
        register("warning", data);
    })
</script>
<script src="js/afterLoad.js"></script>
</html>